<template>
	<div class="homeAdver">
		<h1 class="pageTitle">首页攻略</h1>
		<div class="headerButton">
			<el-button type="primary" class="addSwiper" @click="openAddDialog">添加</el-button>
		</div>
		<div class="homeTipsTable" style="min-width: 1200px">
			<el-table :data="homeStrategyTableData">
				<el-table-column prop="time_string" label="时间" width="180">
				</el-table-column>
				<el-table-column prop="name" label="景点名">
				</el-table-column>
				<el-table-column  label="图片">
					<template slot-scope="scope">
						<img :src="baseUrl+scope.row.img_url" style="width: 100px;"/>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="danger" @click="deleteTips(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="addTipsDialog">
			<el-dialog title="添加首页攻略" :visible.sync="dialogFormVisible">
				<el-form ref="form" :model="form" :rules="rules">
					<el-form-item label="时间" :label-width="formLabelWidth" prop="time">
						<el-time-select v-model="form.time"
							:picker-options="{start: '00:00',
						    step: '00:30',
						    end: '23:30'
						  	}"
						  	placeholder="选择时间">
						</el-time-select>
					</el-form-item>
					<el-form-item label="景点名" :label-width="formLabelWidth" prop="name">
						<el-input v-model="form.name" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="上传图片" :label-width="formLabelWidth" prop="imgUrl">
						<uploadImg @toparent="getImgUrl" :clearImgList="isClearImgList"></uploadImg>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="addTips('form')">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import config from '@/assets/js/config.js'
	import uploadImg from '@/components/uploadImg.vue'
	export default {
		components:{
			uploadImg
		},
		data(){
			return {
				baseUrl:config.baseUrl,
				homeStrategyTableData:[],
				dialogTableVisible: false,
		        dialogFormVisible: false,
		        form: {
		        	time:"",
		          	name: '',
		         	imgUrl:""
		        },
		        formLabelWidth: '120px',
		        rules:{
		        	time:[
		        		{ required: true, message: '请选择时间', trigger: 'blur' }
		        	],
		       		name: [
			            { required: true, message: '请输入景点名', trigger: 'blur' }  
			        ],
			        imgUrl: [
			        	{ required: true, message: '请上传图片', trigger: 'blur' }
			        ]
				},
				isClearImgList:false
			}
		},
		created(){
			this.getData();
		},
		methods:{
			openAddDialog(){
				this.isClearImgList = false;
				this.dialogFormVisible = true;
			},
			//获取上传图片的地址
			getImgUrl(res){
				console.log(res);
				this.form.imgUrl = res;
				console.log(this.form.imgUrl);
			},
			//获取数据
			getData(){
				this.$require.get(config.indexTips).then((res)=>{
					console.log(res);
					this.homeStrategyTableData = res.data.data.rows;
				})
			},
			//增加数据
			addTips(formName){
				this.$refs[formName].validate((valid) => {
		          	if (valid) {
		          		console.log(this.form);
		          		this.$submit.post(config.addHomeTips,{
							img_url: this.form.imgUrl,
							name: this.form.name,
							time_string: this.form.time
						}).then((res)=>{
							console.log("增加成功");
							this.getData();
							this.$message = "增加成功"
							this.dialogFormVisible = false;
							this.form.imgUrl = '';
							this.form.name = '';
							this.form.time = '';
							this.isClearImgList = true;
						})
		          	}else{
		            	console.log('error submit!!');
		            	return false;
		          	}
		     	});
			},
			//删除数据
			deleteTips(idx){
				console.log(idx);
				this.$confirm('此操作将永久删除该内容, 是否继续?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',
			        type: 'warning'
		        }).then(() => {
		        	//提交删除请求
		        	this.$submit.post(config.deleteHomeTips,{
						id:idx
					}).then((res)=>{
						console.log("删除成功");
						this.getData();
						this.$message('删除成功!');
					})
		        }).catch(() => {
		          	this.$message('已取消删除');    
		        });
			}
		}
	}
</script>

<style lang="scss">
.homeAdver{
	height: 100%;
	overflow: auto;
	padding: 20px 30px;
	.pageTitle{
		font-size: 30px!important;
	}
	.headerButton{
		margin: 20px 0;
		overflow: hidden;
	}
}
</style>